<script setup lang="ts">
	import {
		ref,
		reactive,
		inject,
		watch
	} from 'vue'
	import user from '@/api/user.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// import cryptoJS from '@/static/js/encryption.js'
	import CryptoJS from 'crypto-js'
	let isLogon = ref(false)
	let title = ref('登录')
	const apiTry : Function = inject('$try')
	const msgAlert : Function = inject('$msgAlert')
	let isCheck = ref(false)
	let formdata = null
	watch(isLogon, (newValue) => {
		title.value = newValue ? '注册' : '登录'
	})
	
	interface Vform {
		username : string,
		account : string
		password : string
	}
	let form = reactive<Vform>({
		username: '',
		account: '',
		password: ''
	})
	const aesDecrypt = (result) => {
		const key = CryptoJS.enc.Latin1.parse('emhpcnVpemh3eQ')
		var iv = key
		// 解密逻辑
		var decryptd = CryptoJS.AES.decrypt(result, key, {
			iv: iv,
			mode: CryptoJS.mode.CFB,
			padding: CryptoJS.pad.NoPadding
		})
	
		return decryptd.toString(CryptoJS.enc.Utf8)
	}
	const aesEncrypt = (src: string) => {
		const key = CryptoJS.enc.Utf8.parse('emhpcnVpemh3eQ')
		// 加密
		var encrypted = CryptoJS.AES.encrypt(src, key, {
			iv: key,
			mode: CryptoJS.mode.CFB,
			padding: CryptoJS.pad.NoPadding
		})
		return encrypted.toString()
	}
	const submit = () => {
		if (isLogon.value) return logon()
		login()
	}
	const login = async () => {
		if(isCheck.value){
			uni.setStorageSync('formData', aesEncrypt(JSON.stringify(form)))
		}else {
			uni.removeStorageSync('formData')
		}
		const [err, res] = await apiTry(user.login({
			password: form.password,
			account: form.account
		}))
		if (err) return msgAlert(err)
		if (res.status === 200) {
			uni.setStorageSync('token', res.token)
			uni.reLaunch({
				url: '/pages/home/index'
			})
			uni.setStorageSync('userinfo', res.data)
		}

	}
	const logon = async () => {
		const [err, res] = await apiTry(user.logon(form))
		if (err) return msgAlert(err)
		if (res.status === 200) {
			msgAlert(res.msg)
			isLogon.value = false
		}
	}
	const checkIsSoterEnrolledInDeviceFingerPrint = (callBack) => {
		uni.checkIsSoterEnrolledInDevice({
			checkAuthMode: 'fingerPrint',
			success(res) {
				if (!res.isEnrolled) return
				callBack(res.isEnrolled)
			},
			fail(err) {

			}
		})
	}
	const startSoterAuthenticationFingerPrint = (callBack) => {
		uni.startSoterAuthentication({
			requestAuthModes: ['fingerPrint'],
			challenge: '123456',
			authContent: '请用指纹解锁',
			success(res) {
				callBack()
			},
			fail(err) {
				console.log(err);
			}
		})
	}
	const FingerprintVerification = () => {
		// #ifndef H5
		checkIsSoterEnrolledInDeviceFingerPrint((isEnrolled) => {
			startSoterAuthenticationFingerPrint(() => {
				uni.reLaunch({
					url: '/pages/home/index'
				})
			})
		})
		// #endif
		// #ifdef H5
		uni.reLaunch({
			url: '/pages/home/index'
		})
		// #endif
	}
	onLoad(() => {
		let info = uni.getStorageSync('formData')
		if(info){
			isCheck.value = true
			form = JSON.parse(aesDecrypt(info))
		}
	})
</script>

<template>
	<view class="main">
		<u-navbar :is-back="false" :title="title"></u-navbar>
		<view style="margin: 0 20rpx;">
			<u-form :model="form" label-width="120rpx">
				<u-form-item label="用户名" prop="username" v-show="isLogon">
					<u-input v-model="form.username" placeholder="用户名" />
				</u-form-item>
				<u-form-item label="账号" prop="account">
					<u-input v-model="form.account" placeholder="手机号" @confirm="submit" />
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input v-model="form.password" placeholder="请输入密码" @confirm="submit" />
				</u-form-item>
			</u-form>
			<view v-show='!isLogon'>
				<u-button @click="submit">登录</u-button>
				<u-button style="margin-top: 20rpx;" @click="FingerprintVerification">游客登录</u-button>
			</view>

			<u-button v-show='isLogon' style="margin-top: 30rpx;" @click="submit">注册</u-button>
			<view class="flex flex-jc-fe flex-ai-c">
				<view style="text-align: right;margin-top: 20rpx;">
					<label>记住密码：<u-checkbox v-model="isCheck"></u-checkbox></label>
				</view>
				<view v-show='!isLogon' style="text-align: right;margin-top: 20rpx;">
					<text @click="isLogon = true">注册</text>
				</view>
				<view v-show='isLogon' style="text-align: right;margin-top: 20rpx;">
					<text @click="isLogon = false">登录</text>
				</view>
			</view>
		</view>
	</view>
</template>


<style>
</style>